<template>
    <div>
        <h1>{{title}}
            <el-button type="text">新增用户</el-button>
        </h1>
        <div class="panel panel-success">
            <div class="panel-heading">
                所有管理员
            </div>
            <div class="panel-body">
                <el-table
                        :data="userTableData"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            label="创建日期"
                            prop="date">
                    </el-table-column>
                    <el-table-column
                            label="姓名"
                            prop="name">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="userEdit">
                            <el-button
                                    size="small"
                                    @click="handleEdit(userEdit.$index, userEdit.row)"><i class="el-icon-edit"></i>
                            </el-button>
                            <el-button
                                    size="small"
                                    type="danger"
                                    @click="handleDelete(userEdit.$index, userEdit.row)"><i class="el-icon-delete"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'User',
    data () {
      return {
        title: '用户管理',
        userTableData: [
          {
            name: '用户1',
            date: '2017-11-08'
          },
          {
            name: '用户2',
            date: '2017-11-08'
          },
          {
            name: '用户3',
            date: '2017-11-08'
          },
          {
            name: '用户4',
            date: '2017-11-08'
          },
          {
            name: '用户5',
            date: '2017-11-09'
          }
        ]
      }
    },
    methods: {
      handleEdit (index, data) {
        console.log(index, data)
      },
      handleDelete (index, data) {
        console.log(index, data)
        this.$confirm('确定删除当前用户，删除后不可撤销, 是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          this.userTableData.splice(index, index + 1)
          this.$notify({
            title: '删除成功',
            message: '成功删除:' + data.name,
            type: 'success'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>

<style>

</style>
